<template>
    <view class="w-90% width-90 h-45px left-5 fixed rounded-20 overflow-hidden flex items-center z-10"
        :style="{bottom: foodStatus ? 20 + 'px' : foodBottom + 'px'}">
        <view @click="openFood"
            class="w-70% width-70 inline-block h-45px flex items-center bg-gray-900 text-gray-100 flex items-center p-10px box-border">
            <image class="w-47px h-30px" src="@/static/img/food.png" mode="aspectFill"></image>
            <text
                class="absolute transform -translate-y-2 translate-x-8 inline-block p2 bg-red-500 text-gray-100 h-10px flex items-center rounded-20 text-base">3</text>
            <view class="ml-10px">
                <text class="text-xs text-gray-300">合计：</text>
                <text class="text-xs text-gray-300">￥</text>
                <text class="font-bold">90</text>
            </view>
        </view>
        <text
            class="w-30% width-30 inline-block h-45px flex items-center bg-yellow-400 text-gray-900 justify-center text-sm font-bold">去结算</text>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    foodBottom: {
        type: Number,
        default: 0
    },
    foodStatus: {
        type: Boolean,
        default: false
    }
})
watch(() => props.foodStatus, (newValue) => {
    console.log(newValue, '当前状态')
})
const emits = defineEmits(['openFood'])
const openFood = () => {
    emits('openFood', true)
}
</script>

<style scoped>

</style>